<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于卷积神经网络的猫狗分类</title>
    <!--    <link rel="stylesheet" href="./css/index.css">-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #cbb8b8;
            background: url('http://ids.xust.edu.cn/authserver/custom/images/banner.png');
        }

        .title {
            margin: 50px auto;
            text-align: center;
            font-size: 40px;
            color: black;
        }

        .content {
            display: flex;
            justify-content: space-between;
        }

        #uploadImg {
            position: relative;
            width: 350px;
            height: 350px;
            margin-left: 25px;
            /* background-image: url(./images/bgc.png); */
            background-size: 320px;
            background-repeat: no-repeat;
            border: 1px solid black;
        }

        #uploadImg::after {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            content: "在此处选择验证码";
            color: black;
            font-size: 40px;
            line-height: 100%;
            text-align: center;
            top: 0px;
            left: 0px;
            width: 350px;
            height: 350px;
            background-color: transparent;
            vertical-align: middle;
            font-family: STKaiti;
        }

        #upload {
            position: relative;
            border: none;
            display: flex;
            margin-top: 15px;
            margin-left: 155px;
        }

        /* #upload::after{
            position: absolute;
            width: 100px;
            height: 45px;
            top: 0px;
            left: 82px;
            content: " ";
            background-color: #cbb8b8;
        } */

        .upload h1 {
            color: black;
        }

        input[type="file"]::file-selector-button {
            font-weight: normal;
            color: #fff;
            background-color: black;
            border-color: black;
            width: 80px;
            height: 45px;
            font-size: 16px;
        }


        .result {
            padding-right: 200px;
        }

        .result h1 {
            color: black;
        }

        .result div {
            margin-top: 5px;
            width: 350px;
            height: 350px;
            border: 1px solid black;
            font-size: 40px;
            text-align: center;
            line-height: 350px;
            color: rgb(255,255,255);
            font-family: STKaiti;
        }

        #formImage {
            margin-left: 50px;
        }

        #submit {
            width: 150px;
            height: 40px;
            background-color: black;
            border: none;
            font-size: 25px;
            color: azure;
            margin-left: 95px;
            margin-top: 15px;
        }

        .answer {
            color: black;
            margin-right: 50px;
            width: 320px;
            text-align: center;
            padding-top: 15px;
        }
    </style>
</head>

<body>

    <div class="title">基于卷积神经网络的猫狗分类</div>
    <div class="content">
        <form action="/Identifycatanddog" method="post" enctype="multipart/form-data" id="formImage">
            <div class="upload">
                <h1>请在此处选择需要识别的图片</h1>
                <input type="file" id="upload" name="file">
                <br>
                <img src="" id="uploadImg">
            </div>
            <input type="submit" id="submit">
        </form>
        <div class="result">
            <h1>识别结果为：</h1>
            <h1 class="answer">等待识别····</h1>
            <br>
            <div>动物识别结果</div>
        </div>
    </div>




    <!-- <script src="./js/index.js"></script> -->
    <script>
        function ProcessFile(e) {
            var file = document.getElementById('upload').files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var txt = event.target.result;
                    // var img = document.createElement("img");
                    img = document.getElementById("uploadImg")
                    img.src = txt;//将图片base64字符串赋值给img的src
                    //console.log(txt);
                    // document.getElementById("uploadImg").appendChild(img);
                };
            }
            reader.readAsDataURL(file);
        }

        function contentLoaded() {
            document.getElementById('upload').addEventListener('change',
                ProcessFile, false);
        }

        window.addEventListener("DOMContentLoaded", contentLoaded, false);
        const form = document.getElementById('formImage')
        const resultDiv = document.querySelector('.result div');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            resultDiv.textContent = '等待识别····'
            const formData = new FormData(form);
            if (img.src === '') {
                alert('未选择图片')
                return 0
            }
            const response = await fetch('/Identifycatanddog', {
                method: 'POST',
                body: formData
            });
            const result = await response.json();
            console.log(result);
            updateResult(result.predict_message);
        });
        function updateResult(predictText) {
            resultDiv.textContent = predictText;
            resultDiv.style.fontSize = '50px'
            const answer = document.querySelector('.answer');
            answer.style.color = 'green'
            answer.textContent = '识别成功';
        }

    </script>
</body>

</html>